/*
 * @Author: mayijun
 * @Date: 2022-05-19 09:44:43
 * @LastEditors: mayijun
 * @LastEditTime: 2022-07-04 14:31:00
 */
//指标详情

import API from "@/services";
// import { a-col, a-row } from "element-plus";
import { defineComponent, onMounted, reactive, watch } from "vue";
import { useRoute } from "vue-router";
import { store } from '@/store';
import './index.scss';
import * as RouteNames from '@/router/consts';
import { Message } from '@arco-design/web-vue';
const IndexInfo = defineComponent({
  name: 'IndexInfo',
  components: {},
  props: {
    metricsId: {
      type: Number || String || undefined
    }
  },
  setup: (props, { slots, attrs, emit }) => {

    const state: any = reactive({
      info: {}
    });


    /* 指标详情 */
    const getMetricsInfo = async (id: any) => {
      try {
        const { code, data, msg }: any = await API.metrics.getMetricsById({ id });
        if (code === 200) {
          state.info = data;
          //处理维度
          let dimensionsName = data.dimensions.map((item: any) => item.cnName);
          data.dimensions = dimensionsName.join("、");
          
          //修饰词处理
          if(data.modifiers){
            let modifierName = data.modifiers.map((item: any) => item.cnName);
            data.modifiers = modifierName.join("、");
          }
        } else if (code === 500) {
          Message.error(msg)
        }
      } catch (error) {
        console.log(error);
      }
    };

    //基本信息render
    const baseRender = () => {
      return (
        <div class="index-item">
          <div class="title">基本信息</div>
          <a-row class="index-row" gutter={18}>
            <a-col span={6}>
              <div class="label">指标名称:</div>
              <div class="value">{state.info.cnName}</div>
            </a-col>
            <a-col span={6}>
              <div class="label">英文名称:</div>
              <div class="value">{state.info.enName}</div>
            </a-col>
            <a-col span={6}>
              <div class="label">指标别名:</div>
              <div class="value">{state.info.alias}</div>
            </a-col>
            <a-col span={6}>
              <div class="label">指标等级:</div>
              <div class="value">{state.info.grade}</div>
            </a-col>
          </a-row>
          <a-row class="index-row" gutter={18}>
            <a-col span={6}>
              <div class="label">计量单位:</div>
              <div class="value">{state.info.unit}</div>
            </a-col>
            <a-col span={6}>
              <div class="label">提需人:</div>
              <div class="value">{state.info.sourceMaker}</div>
            </a-col>
            <a-col span={6}>
              <div class="label">需求ID:</div>
              <div class="value">{state.info.source}</div>
            </a-col>
            <a-col span={6}>
              <div class="label">指标ID:</div>
              <div class="value">{state.info.id}</div>
            </a-col>
          </a-row>
          <a-row class="index-row" gutter={18}>
            <a-col span={6}>
              <div class="label">创建人:</div>
              <div class="value">{state.info.createBy}</div>
            </a-col>
            <a-col span={6}>
              <div class="label">创建时间:</div>
              <div class="value">{state.info.createTime}</div>
            </a-col>
          </a-row>
          <a-row class="index-row" gutter={18}>
            <a-col span={24}>
              <div class="label">业务含义:</div>
              <div class="value">{state.info.businessMeaning}</div>
            </a-col>
          </a-row>
        </div>
      );
    }
    //业务信息render
    const businessRender = () => {
      return (
        <div class="index-item">
          <div class="title">业务信息</div>
          <a-row class="index-row" gutter={18}>
            <a-col span={6}>
              <div class="label">业务负责人:</div>
              <div class="value">{state.info.businessOwner}</div>
            </a-col>
            <a-col span={18}>
              <div class="label">关联部门:</div>
              <div class="value">{state.info.departmentStr}</div>
            </a-col>
          </a-row>
          <a-row class="index-row" gutter={18}>
            <a-col span={24}>
              <div class="label">备注:</div>
              <div class="value">{state.info.description}</div>
            </a-col>
          </a-row>
        </div>
      );
    }
    //技术信息render
    const techRender = () => {
      if (state.info.metricsType == 2) {
        return (
          <div class="index-item">
            <div class="title">技术信息</div>
            <a-row class="index-row" gutter={18}>
              <a-col span={6}>
                <div class="label">原子指标:</div>
                <div class="value">{state.info.dependMetrics.cnName}</div>
              </a-col>
              <a-col span={6}>
                <div class="label">修饰词:</div>
                <div class="value">{state.info.modifiers}</div>
              </a-col>
              <a-col span={6}>
                <div class="label">研发负责人:</div>
                <div class="value">{state.info.techOwner}</div>
              </a-col>
              <a-col span={6}>
                <div class="label">统计粒度:</div>
                <div class="value">{state.info.timePeriodStr}</div>
              </a-col>
            </a-row>
            <a-row class="index-row" gutter={18}>
              <a-col span={6}>
                <div class="label">默认聚合方式:</div>
                <div class="value">{state.info.aggregation}</div>
              </a-col>
              <a-col span={6}>
                <div class="label">主题层级:</div>
                <div class="value">{state.info.fullSubjectName}</div>
              </a-col>
              <a-col span={6}>
                <div class="label">数据类型:</div>
                <div class="value">{state.info.dataType}</div>
              </a-col>
              <a-col span={6}>
                <div class="label">可用维度:</div>
                <div class="value">{state.info.dimensions}</div>
              </a-col>
            </a-row>
            <a-row class="index-row" gutter={18}>
              <a-col span={24}>
                <div class="label">指标类型:</div>
                <div class="value">{state.info.metricsTypeName}</div>
              </a-col>
            </a-row>
            <a-row class="index-row" gutter={18}>
              <a-col span={24}>
                <div class="label">技术口径:</div>
                <div class="value">{state.info.caliber}</div>
              </a-col>
            </a-row>
          </div>
        );
      } else {
        return (
          <div class="index-item">
            <div class="title">技术信息</div>
            <a-row class="index-row" gutter={18}>
              <a-col span={6}>
                <div class="label">研发负责人:</div>
                <div class="value">{state.info.techOwner}</div>
              </a-col>
              <a-col span={6}>
                <div class="label">统计粒度:</div>
                <div class="value">{state.info.timePeriodStr}</div>
              </a-col>
              <a-col span={6}>
                <div class="label">主题层级:</div>
                <div class="value">{state.info.fullSubjectName}</div>
              </a-col>
              <a-col span={6}>
                <div class="label">默认聚合方式:</div>
                <div class="value">{state.info.aggregation}</div>
              </a-col>
            </a-row>
            <a-row class="index-row" gutter={18}>
              <a-col span={6}>
                <div class="label">数据类型:</div>
                <div class="value">{state.info.dataType}</div>
              </a-col>
              <a-col span={6}>
                <div class="label">可用维度:</div>
                <div class="value">{state.info.dimensions}</div>
              </a-col>
              <a-col span={6}>
                <div class="label">指标类型:</div>
                <div class="value">{state.info.metricsTypeName}</div>
              </a-col>
            </a-row>
            {state.info.metricsType == 3 && (
              <a-row class="index-row" gutter={18}>
                <a-col span={24}>
                  <div class="label">运算逻辑:</div>
                  <div class="value">{state.info.calculationFormulaStr}</div>
                </a-col>
              </a-row>
            )}
            <a-row class="index-row" gutter={18}>
              <a-col span={24}>
                <div class="label">技术口径:</div>
                <div class="value">{state.info.caliber}</div>
              </a-col>
            </a-row>
          </div>
        );
      }
    }
    //管理信息render
    const manageRender = () => {
      return (
        <div class="index-item">
          <div class="title">管理信息</div>
          <a-row class="index-row" gutter={18}>
            <a-col span={6}>
              <div class="label">版本号:</div>
              <div class="value">{state.info.versionNo}</div>
            </a-col>
            <a-col span={6}>
              <div class="label">授权人:</div>
              <div class="value">{state.info.authorizer}</div>
            </a-col>
            <a-col span={6}>
              <div class="label">更新人:</div>
              <div class="value">{state.info.updateBy}</div>
            </a-col>
            <a-col span={6}>
              <div class="label">更新时间:</div>
              <div class="value">{state.info.updateTime}</div>
            </a-col>
          </a-row>
        </div>
      );
    }
    watch(
        () => props.metricsId,
        async (val) => {
          if (val != undefined) {
            await getMetricsInfo(val)
          }
        },
        {
            immediate: true
        }
    )

    return () => {
      return (
        <div class="info_container">
          <div class="index-content">
            {/* 原子指标 */}
            {state.info.metricsType == 1 && baseRender()}
            {state.info.metricsType == 1 && businessRender()}
            {state.info.metricsType == 1 && techRender()}
            {state.info.metricsType == 1 && manageRender()}
            {/* 派生和衍生指标 */}
            {state.info.metricsType != 1 && techRender()}
            {state.info.metricsType != 1 && baseRender()}
            {state.info.metricsType != 1 && businessRender()}
            {state.info.metricsType != 1 && manageRender()}
          </div>
        </div>
      );
    };
  }
});

export default IndexInfo;
